<!--
 * @Author: your name
 * @Date: 2021-02-20 15:44:57
 * @LastEditTime: 2021-02-20 15:49:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demoe:\前端开发学习\hmtt\hm63-hmtt-wsh\src\views\home\main\search.vue
-->
<template>
  <!-- @search="onSearch"
      @cancel="onCancel" -->
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      background="#3296fa"
      @cancel="onCancel"
      @search="onSearch"
    />
    <div class="searchBox" v-show="isShow">
      <div
        class="searchBox2"
        v-for="(item, index) in suggestionList"
        :key="index"
      >
        <div class="searchItem " @click="goSearchList(item)">
          <i class="iconfont icon-sousuo"></i>
          <div class="text van-ellipsis" v-html="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { suggestion } from '@/api/search.js'
export default {
  data () {
    return {
      isShow: false,
      expand: [],
      value: '',
      suggestionList: [],
      time: ''
    }
  },
  // 监听搜索框中的value
  watch: {
    value (newVal) {
      if (newVal.lenght === 0) {
        this.isShow = false
      } else {
        // console.log(this.time)
        // 设置防抖
        if (this.time) {
          clearTimeout(this.time)
        }
        this.time = setTimeout(async () => {
          if (this.value.trim() !== '') {
            const res = await suggestion({
              q: this.value
            })
            // console.log(res.data.options)

            this.suggestionList = res.data.options.map(item => {
              const _arr = item.split(this.value)
              return _arr.join(`<span style="color:red">${this.value}</span>`)
              // console.log(item)
            })

            this.isShow = true
          } else {
            // 如果搜索框的value为空就隐藏searchBox
            this.isShow = false
            this.suggestionList = ''
          }
        }, 1000)
      }
    }
  },
  methods: {
    // 点击清除按钮时
    clear () {
      this.isShow = false
      this.suggestionList = ''
    },
    // 点击取消时
    onCancel () {
      this.$router.push('/home/main')
    },
    // 回车时跳转到搜索列表页面
    onSearch () {
      this.$router.push(`searchList?value=${this.value}`)
    },
    goSearchList (item) {
      this.$router.push(`/home/searchList?value=${item}`)
    }
  },
  // 改变body颜色
  mounted () {
    document.body.style.backgroundColor = '#f5f7f9'
  },
  // 还原body颜色
  beforeDestroy () {
    document.body.style.backgroundColor = '#fff'
  }
}
</script>
<style lang="less" scoped>
.search {
  .searchBox {
    background-color: #fff;

    box-sizing: border-box;
    .searchBox2 {
      border-bottom: 1px solid #ccc;
      .searchItem {
        padding: 0 @p15;
        box-sizing: border-box;
        display: flex;
        font-size: 12px;
        height: 48px;
        line-height: 48px;

        i {
          margin-right: 5px;
        }
        .text {
          // width: 320px;
          flex: 1;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
